<template>
  <input-box title="个人信息">
    <div slot='body'>
      <el-row>
        <el-col :span="12">
          <show-item label="用户名" :value="authUser.name" />
          <show-item label="电子邮件" :value="authUser.email" />
          <show-item label="注册时间" :value="authUser.created_at" />
          <show-item label="最后修改" :value="authUser.updated_at" />
        </el-col>
        <el-col :span="12">
          <div class="avatarImg">
            <img v-if="imageUrl" :src="imageUrl">
            <i v-else class="el-icon-plus"></i>
          </div>
        </el-col>
      </el-row>
      <image-cropper v-model="show" :width="150" :height="150" ref="imageCropper" field="avatar" @crop-upload-success="cropUploadSuccess" url="/api/profile/user/avatar"></image-cropper>

    </div>

    <div slot="footer">
      <el-button type="primary" size="small" @click.native.prevent="changePasswordBtn()">修改图像
      </el-button>
    </div>
  </input-box>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
import imageCropper from '../../components/imageCropper.vue';
export default {
  data () {
    return {
      imageUrl: '',
      show: false
    };
  },
  components: {
    'imageCropper': imageCropper
  },
  computed: {
    ...mapGetters(['authUser', 'userInfo'])
  },
  created () {
    this.imageUrl = this.userInfo['avatar'];
  },
  methods: {
    ...mapMutations([
      'FETCH_USER_SUCCESS'
    ]),
    changePasswordBtn () {
      this.$refs['imageCropper'].reset();
      this.$refs['imageCropper'].startCrop();

      this.show = !this.show;

    },
    /**
     * upload success
     *
     * [param] jsonData  server api return data, already json encode
     * [param] field
     */
    cropUploadSuccess(jsonData, field) {
      this.FETCH_USER_SUCCESS(jsonData.data);
      this.imageUrl = this.userInfo['avatar'];
      this.$refs['imageCropper'].off();
      this.show = false;
    },
  }
};
</script>
<style lang="scss">
.avatarImg {
  width: 100%;
  img {
    display: block;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    margin: 0 auto;
  }
}
</style>
